import React, { Component } from 'react'
import empty from '../../assets/images/empty.jpg'
import './Cart.scss'
import { NavBar} from "antd-mobile";
export default class Cart extends Component {
    state = {
        cars: [],
        totalPrice:0,
        allChech:true,
        productsNum:0
    }

    componentDidMount() {
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        this.setState({
            cars,
            productsNum:cars.length
        })
    }
    // 单选
    handClick=(goods_id) => {
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        //找到相对应数据的下标
        let index=cars.findIndex(v=>{
            if(v.goods_id===goods_id){
                return true
            }
        })
        // 修改localStorage里面单选的状态
        cars[index].ischeck=!cars[index].ischeck
        // 把数据设置回去
        localStorage.setItem('products',JSON.stringify(cars))
        this.setState({cars})

    }
    // 加
    addClick=(goods_id) => {
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        let index=cars.findIndex(v=>{
            if(v.goods_id===goods_id){
                return true
            }
        })
        cars[index].num++
        localStorage.setItem('products',JSON.stringify(cars))
        this.setState({
            cars
        })
        this.connClick()
        
    }
    //计算总计
    connClick=()=>{
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        let sum=0
        for(var i=0;i<cars.length;i++){
            if(cars[i].ischeck==true){
                sum+=parseFloat(cars[i].goods_price*cars[i].num)
            }
        }
        this.setState({
            totalPrice:sum
        })
       
    }
    // 减
    subClick=(goods_id) => {
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        let index=cars.findIndex(v=>{
            if(v.goods_id===goods_id){
                return true
            }
        })
        if(cars[index].num<=1){
            cars[index].num=1
        }else{
            cars[index].num--
        }
        localStorage.setItem('products',JSON.stringify(cars))
        this.connClick()
        this.setState({
            cars
        })
    }
    // 全选
    qxClick=() => {
        let products = localStorage.getItem('products')
        let cars = JSON.parse(products || "[]")
        //遍历数据
        for(var i=0;i<cars.length;i++){
            if(this.state.allChech==true){
                cars[i].ischeck=true
            }else{
                cars[i].ischeck=false
            }
        }
        localStorage.setItem('products',JSON.stringify(cars))
        this.setState({
            cars
        })

    }
    // 结算
    jsClick=()=>{
        alert('确定支付吗？')
    }
    render() {
        return (
            <div className='yg-carts'>
                {/* 头部开始 */}
                <div className='yg-carts-title'>
                    <NavBar className="cart-content-nav">优购商城</NavBar>
                </div>
                {/* 头部结束 */}
                {/* 内容开始 */}
                {
                    this.state.cars.length ? (
                        <div className='cart-content'>
                            {/* 列表开始 */}
                            <div className='cart-list'>
                                {
                                    this.state.cars.map((v, i) => {
                                        return (
                                            <div className='cart-con-item' key={v.goods_id}>
                                                {/* 左边单选 */}
                                                <div className='list-item-left'>
                                                    <i onClick={this.handClick.bind(this,v.goods_id)}
                                                    className={v.ischeck?'iconfont icon-danxuanxuanzhong active':'iconfont icon-danxuan'}></i>
                                                </div>
                                                {/* 中间图片 */}
                                                <div className='list-item-center'>
                                                    <img src={v.goods_big_logo} alt=''></img>
                                                </div>
                                                {/* 右边价格 */}
                                                <div className='list-item-right'>
                                                    <div className='right-tit'>
                                                        <p>{v.goods_name}</p>
                                                    </div>
                                                    <div className='right-price'>
                                                        <div className="price-l">
                                                            <span>￥{v.goods_price}</span>
                                                        </div>
                                                        <div className="price-r">
                                                            <i className='iconfont icon-jian' onClick={this.subClick.bind(this,v.goods_id)}></i>
                                                            <span className='right-num'>{v.num}</span>
                                                            <i className='iconfont icon-jia'  onClick={this.addClick.bind(this,v.goods_id)}></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            {/* 列表结束 */}
                            {/* 底部结算开始 */}
                            <div className='carts-btn'>
                                {/* 全选 */}
                                <div className='checkAll'>
                                    <i className={this.state.allChech?'iconfont  icon-danxuanxuanzhong active':'iconfont icon-danxuan'} onClick={this.qxClick}></i>
                                    <span>全选</span>
                                </div>
                                {/* 合计 */}
                                <div className='totalPrice'>
                                    <span className="text1">合计:</span>
                                    <span className="price">￥{this.state.totalPrice}</span>
                                </div>
                                {/* 去结算按钮 */}
                                <div className='jsbtn'>
                                    <div className='go' onClick={this.jsClick}>
                                        <span>去结算({this.state.productsNum})</span>
                                    </div>
                                </div>
                            </div>
                            {/* 底部结算结束 */}
                        </div>
                    ) : (
                            <div className='cart-empty'>
                                <img src={empty} alt=''></img>
                                <h3 className="empty_text"><a href="#/category">去逛逛</a></h3>
                            </div>
                        )
                }
                {/* 内容结束 */}
            </div>
        )
    }
}
